<template>
  <div class="app-container">
    <div class="filter-container">
      <!-- 类别table start-->
      <div class="list">
        <!-- 数据总计区域 start -->
        <div v-show="!listLoading" class="pagination-container">
          <div style="margin-right: 10px;margin-bottom: 10px;float:left;color:rgb(44,162,252);padding-top: 7px;font-size: 14px">
            数据总计: {{ total }} (条)
          </div>
        </div>
        <!-- 数据总计区域 end -->
        <!--列表 start-->
        <el-table
          v-loading.body="listLoading"
          border
          :data="list"
          tooltip-effect="dark"
          style="width: 100%;"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55"
            align="center">
          </el-table-column>
          <el-table-column
            prop="user_name"
            label="用户名"
            min-width="120"
            align="center"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="phone"
            label="手机号"
            min-width="120"
            align="center"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="work_num"
            label="工号"
            min-width="100"
            align="center"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <el-tag>{{ scope.row.work_num }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="company"
            label="单位名称"
            min-width="220"
            align="center"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态"
            min-width="150"
            align="center"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button type="success" size="small" v-if="scope.row.status === 1" @click="changeStatus(scope.row.id, scope.row.status)">正常</el-button>
              <el-button type="danger" size="small" v-else @click="changeStatus(scope.row.id, scope.row.status)">禁用</el-button>
            </template>
          </el-table-column>
          <el-table-column prop='create_time' label="注册时间" align="center" min-width="150"></el-table-column>
        </el-table>
        <!--列表 end-->
      </div>
      <!-- 分页区域 start -->
      <div v-show="!listLoading" class="pagination-container">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page"
                       :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
      <!-- 分页区域 end -->
      <!-- 类别table end-->
    </div>
  </div>
</template>
<script>
  import { memberList, changeStatus } from '@/api/member'
  export default {
    data() {
      return {
        /** 基本变量 **/
        listQuery: { // 列表请求数据
          page: 1,
          limit: 10, // 每页显示10条
          where: {
            status: '' // 状态
          }
        },
        list: [],
        total: 0,
        listLoading: false,
        multipleSelection: []
      }
    },
    methods: {
      /** 获取列表数据 **/
      fetchList() {
        // 开启加载层
        this.listLoading = true
        memberList(this.listQuery).then(response => {
          // 当page不等于1时 判断返回数组是否为空
          if (!response.data && this.listQuery.page !== 1) {
            // 当前页－1
            this.listQuery.page = this.listQuery.page - 1
            // 重新获取数据
            this.fetchDatas()
          } else {
            // 添加列表数据
            this.list = response.data
            // 设置总条数
            this.total = response.count
            // 关闭 加载层
            this.listLoading = false
          }
        })
      },
      /** 修改状态 **/
      changeStatus(id, stauts) {
        changeStatus({ id: id, status: stauts }).then(response => {
          this.$notify.success({
            title: '信息提示',
            message: response,
            duration: 3000
          })
          this.fetchList()
        })
      },
      // 选择操作
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      // 自定义显示条数
      handleSizeChange(value) {
        // 重新定义每页显示几条
        this.listQuery.page = 1
        this.listQuery.limit = value
        this.fetchList()
      },
      // 页数跳转
      handleCurrentChange(value) {
        this.listQuery.page = value
        this.fetchList()
      }
    },
    // 页面第一次执行
    mounted() {
      this.fetchList()
    }
  }

</script>
<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 110px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
